import React, { Component } from 'react';
import { connect } from 'dva';
import { Radio } from 'antd';

import echarts from 'echarts';

import styled from 'styled-components'
import styles from './style.css';

const MyCircleBox = styled.div`
	width: 10px;
	height: 10px;
	background: ${(props) => props.color};
	border-radius: 50%;
`;

const MySpan = styled.span`
	display: inline-block;
	height: 13;
	width:30px;
	line-height: 8px;
	margin-left: ${props => props.left || 0};
	color:rgba(0,0,0,0.85);
	font-weight: 400;
	font-size: 15;
`;

const MyLegend = ({ data }) => {
	return (
		<>
			<section style={{ marginTop: 15 }}>
				<MyCircleBox color={data.color} />
				<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', width: 150, marginLeft: 17, marginTop: -17 }}>
					<MySpan>{data.type}</MySpan>
					<span style={{ color: '#CCCCCC' }}>|</span>
					<MySpan>{data.percentage}</MySpan>
					<MySpan>{data.number}</MySpan>
				</div>
			</section>
		</>
	);
};

@connect(({ analyse_alarm }) => ({
	alarmTotal: analyse_alarm.alarmTotal || {}
}))
export default class Categories extends Component<any, any> {
	readonly state = {
		mode: -1,
	}
	handleChange = (e) => {
		const mode = e.target.value;
		this.setState(() => ({ mode }), () => {
			this.queryData(mode)
		});
	}

	queryData = mode => {
		const { dispatch } = this.props;
		dispatch({ type: 'analyse_alarm/queryAlarmTotal', payload: { handle: mode } }).then(() => {
			const { list = [] } = this.props.alarmTotal
			const ydata = Array.isArray(list) && list.map(item => ({
				name: item.stateName,
				value: item.count,
				color: COLOR[item.state]
			}))

			if (this.refs.categories) {
				let categories = echarts.init(this.refs.categories);
				let option = {
					backgroundColor: 'rgba(255,255,255,1)',
					color: ydata.map(v => v.color),
					tooltip: {
						trigger: 'item',
						formatter: "{b}: {c} ({d}%)"
					}, 
					series: [
						{
							hoverAnimation: false,
							type: 'pie',
							clockwise: false, //饼图的扇区是否是顺时针排布
							minAngle: 2, //最小的扇区角度（0 ~ 360）
							radius: ['55%', '80%'],
							center: ['40%', '50%'],
							avoidLabelOverlap: false,
							itemStyle: {
								//图形样式
								normal: {
									borderColor: '#ffffff',
									borderWidth: 6
								}
							},
							label: {
								normal: {
									show: false,
									position: 'center',
									formatter: '{text|{b}}\n{c} ({d}%)',
									rich: {
										text: {
											color: '#666',
											fontSize: 14,
											align: 'center',
											verticalAlign: 'middle',
											padding: 8
										},
										value: {
											color: '#8693F3',
											fontSize: 24,
											align: 'center',
											verticalAlign: 'middle'
										}
									}
								},
								emphasis: {
									show: false,
									textStyle: {
										fontSize: 24
									}
								}
							},
							data: ydata
						}
					]
				};
				categories.setOption(option);
			}
		})
	}

	componentDidMount() {
		this.queryData(-1)
	}

	render() {
		const { list = [], total = 1 } = this.props.alarmTotal;
		const { mode } = this.state;

		const state = STATE[mode]

		const legendData = list && Array.isArray(list) && list.map(item => {
			return {
				color: COLOR[item.state],
				type: item.stateName || '',
				number: item.count || 0,
				percentage: `${(((item.count / total || 0) * 100)).toFixed(1)}%` || '0%'
			}
		})

		return (
			<>
				<div ref="categories" style={{ width: '100%', height: '100%' }} ></div>
				<div style={{ position: 'absolute', top: 62, right: 30 }}>
					<Radio.Group className={styles.radioGroup} buttonStyle="solid" onChange={this.handleChange} value={this.state.mode}>
						{
							['-1', '1', '2'].map(v => <Radio.Button value={+v} key={v}>{STATE[+v].alias || STATE[+v].name}</Radio.Button>)
						}
					</Radio.Group>
				</div>
				<div style={{ position: 'absolute', right: 79, top: 113 }}>
					{
						legendData && Array.isArray(legendData) && legendData.map((item) => (
							<MyLegend data={item} key={item.type} />
						))
					}
				</div>
				<div style={{ position: 'absolute', top: '47%', left: 'calc(50% - 108px)', textAlign: 'center' }}>
					<h3 style={{ fontSize: 18, color: 'rgba(0, 0, 0, 0.85)' }}>{state.name}</h3>
					<h3 style={{ color: `${state.color}`, fontSize: 26 }}>{total}</h3>
				</div>
			</>
		)
	}
}


const COLOR = {
	900: '#F2637B',
	500: '#3AA0FF',
	700: '#36CBCB',
	102: '#FAD337',
	101: '#FB8E32',
	103: '#4ECB73',
}

const STATE = {
	'-1': { name: '报警数', color: '#0880DF', alias: '全部' },
	'1': { name: '未处理', color: '#E61219' },
	'2': { name: '已处理', color: '#3D9B38' },
}
